<div class="row" id="utilizationRate">

	<div class="col-lg-12">
		<br>
		<div class="panel panel-default">
			<div class="panel-heading">车点</div>
			<!-- /.panel-heading -->
			<div class="panel-body">
				<div id="dataTables-example_wrapper"
					class="dataTables_wrapper form-inline dt-bootstrap no-footer">
					
					<div class="row">
						<div class="col-sm-12">
							<div id="dataTables-example_filter" class="dataTables_filter">
								<label> 名称:
									<input type="text" v-model.trim.lazy="queryCondition.stationName"
										class="form-control input-sm"
										aria-controls="dataTables-example">
								</label> 
								<label> 地址:
									<input type="text" v-model.trim.lazy="queryCondition.address"
									class="form-control input-sm"
									aria-controls="dataTables-example">
								</label>
								<button type="button" class="btn btn-primary" @click="goPage(1)">查询</button>
							</div>
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-12">
							<table width="100%"
								class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline"
								role="grid" aria-describedby="dataTables-example_info"
								style="width: 100%;">
								<thead>
									<tr role="row">
										<th>编号</th>
										<th>名称</th>
										<th>地址</th>
										<th>车桩数量</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(item,index) in list"
										:class="{gradeA:true,even:index%2==0,odd:index%2==1}"
										role="row">
										<td>{{item.stationCode}}</td>
										<td>{{item.stationName}}</td>
										<td>{{item.address}}</td>
										<td>{{item.bicyclePileNum}}</td>
										<td>
											<button type="button" class="btn btn-primary" 
												@click="detail(item.stationId,item.stationCode,item.stationName,item.bicyclePileNum)"
												data-toggle="modal" data-target="#detailModal"
											>详情</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4">
							<div class="dataTables_info" id="dataTables-example_info"
								role="status" aria-live="polite">
								每页显示{{pageInfo.pageSize}}条，共{{pageInfo.total}}条
							</div>
						</div>
						<div class="col-sm-8">
							<div class="dataTables_paginate paging_simple_numbers"
								id="dataTables-example_paginate">
								<ul class="pagination">
									<li
										:class="{paginate_button:true, previous:true, disabled:pageInfo.isFirstPage}"
										aria-controls="dataTables-example" tabindex="0"
										id="dataTables-example_previous">
										<a href="javascript:void(0)" @click="goPage(pageInfo.pageNum-1)">上一页</a>
									</li>

									<li v-for="item in pageInfo.navigatepageNums"
										:class="{paginate_button:true, active:item==pageInfo.pageNum}"
										aria-controls="dataTables-example" tabindex="0">
										<a href="javascript:void(0)" @click="goPage(item)">{{item}}</a>
									</li>
									<li
										:class="{paginate_button:true, next:true, disabled:pageInfo.isLastPage}"
										aria-controls="dataTables-example" tabindex="0"
										id="dataTables-example_next">
										<a href="javascript:void(0)" @click="goPage(pageInfo.pageNum+1)">下一页</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 数据详情页 -->
	<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
           <div class="modal-content">
               <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                   <h4 class="modal-title" id="myModalLabel">车点使用率信息统计</h4>
               </div>
               <div class="modal-body">
               		<dl class="dl-horizontal">
                        <dt>编号</dt>
                        <dd>{{utilizationRate.stationCode}}</dd>
                        <dt>名称</dt>
                        <dd>{{utilizationRate.stationName}}</dd>
                        <dt>车桩数量</dt>
                        <dd>{{utilizationRate.bicyclePileNum}}</dd>
                        <dt>日均租出车辆数</dt>
                        <dd>{{utilizationRate.avgBorrow}}</dd>
                        <dt>日均还入车辆数</dt>
                        <dd>{{utilizationRate.avgReturn}}</dd>
                        <dt>日均调出车辆数</dt>
                        <dd>{{utilizationRate.avgFrom}}</dd>
                        <dt>日均调入车辆数</dt>
                        <dd>{{utilizationRate.avgTo}}</dd>
                        <dt>日均维修调出车辆数</dt>
                        <dd>{{utilizationRate.avgRepairFrom}}</dd>
                        <dt>日均维修调入车辆数</dt>
                        <dd>{{utilizationRate.avgRepairTo}}</dd>
                    </dl>
               </div>
               <div class="modal-footer">
               </div>
           </div>
           <!-- /.modal-content -->
       </div>
       <!-- /.modal-dialog -->
   </div>
</div>
<script type="text/javascript" src="../js/utilizationRate.js"></script>
